<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../reset.css">
    <link rel="stylesheet" href="../fa/css/all.css">
    <style>
        body {
            font: 14px/1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
            color: #333;
            background-color: #fff;
            /*body与内容区最小值保持一致*/
            min-width: 1226px;
        }

        a {
            text-decoration: none;
            color: #111;
        }

        /*中间容器宽度*/
        .w {
            width: 1226px;
            /*居中*/
            margin: 0 auto;
        }

        .top-bar-wrapper {
            width: 100%;
            height: 40px;
            line-height: 40px;
            background-color: #111;
        }

        .top-bar-wrapper a {
            text-decoration: none;
            color: #8b8b8b;
            display: inline-block;
            margin: 0 9px;
        }

        .top-bar-wrapper a:hover {
            color: #b0b0b0;
        }

        .top-bar .line {
            font-size: 12px;
            color: #424242;
        }

        .top-bar {
            width: 1226px;
            margin: 0 auto;
            position: relative;
        }

        .top-bar li {
            float: left;
        }

        .service {
            float: left;
        }

        .app {
            position: relative;
        }

        .app:hover .qr-code {
            height: 148px;
        }

        .app .qr-code {
            width: 124px;
            height: 0;
            overflow: hidden;
            background-color: #fff;
            position: absolute;
            line-height: 1;
            box-shadow: 0 0 10px #424242;
            left: -30px;
            transition: height 0.5s;
        }

        .app .qr-code img {
            width: 90px;
            margin: 12px 18px 6px 18px;

        }

        .app .qr-code span {
            font-size: 14px;
            margin: 0 17px;
            text-align: center;
        }

        .shop-cart, .user-info {
            float: right;
        }

        .shop-cart {
            position: relative;
        }

        .shop-cart:hover .shop-cart-info {
            height: 100px;
        }

        .shop-cart .shop-cart-info {
            overflow: hidden;
            width: 310px;
            height: 0;
            line-height: 100px;
            position: absolute;
            top: 40px;
            background-color: #fff;
            left: -180px;
            text-align: center;
            box-shadow: 0 0 10px #424242;
            transition: height 0.3s;
        }

        .shop-cart a {
            width: 120px;
            background-color: #424242;
            text-align: center;
        }

        .shop-cart:hover a {
            background-color: #ffffff;
            color: #ff6700;
        }

        .header {
            height: 100px;
        }

        .header .logo {
            float: left;
        }

        .header .logo a {
            display: block;
            width: 55px;
            height: 55px;
            margin: 22px auto;
        }

        .header .logo img {
            width: 56px;
        }

        .nav-wrapper {
            width: 1263px;
            height: 100px;
            line-height: 100px;
            margin-left: 7px;
        }

        .nav-wrapper nav {
            padding-left: 58px;
        }

        .nav-wrapper li {
            float: left;
        }

        .nav-wrapper a {
            display: block;
            font-size: 16px;
            margin-right: 20px;
        }

        /*全部商品*/
        .all-goods-wrapper {
            position: relative;
        }

        .all-goods {
            visibility: hidden;
        }

        /*左侧导航栏*/
        .all-goods-wrapper .left-menu {
            position: absolute;
            width: 234px;
            height: 420px;
            background-color: rgba(0, 0, 0, .6);
            z-index: 999;
            left: -55px;
            padding: 20px 0;
        }

        .all-goods-wrapper .left-menu li {
            /*清除浮动*/
            clear: both;
            display: block;
            width: 100%;
        }

        .all-goods-wrapper .left-menu li:hover {
            background-color: rgb(255, 106, 0);
        }

        .left-menu a {
            display: block;
            height: 42px;
            line-height: 42px;
            color: #F4F4F4;
            margin-right: 0;
            position: relative;
            padding-left: 30px;
        }

        .left-menu i {
            margin-right: 10px;
            position: absolute;
            right: 10px;
            top: 12px;
        }


        .search {
            float: right;
            width: 300px;
            height: 50px;
            line-height: 50px;
            margin-top: 22px;
        }

        .search:hover.search li input {
            border: #111 1px solid;
            border-right: none;
        }

        .search:hover.search li .hold-list {
            border: #111 1px solid;
            border-top: none;
        }

        .search:hover.search .search-fa {
            border: #111 1px solid;
        }

        .search li {
            float: left;
            height: 100%;
        }

        .search li input {
            width: 223px;
            height: 48px;
            padding: 0 10px 1px;

            border: rgb(224, 224, 224) 1px solid;
        }

        .search .search-fa {
            width: 38px;
            height: 49px;
            line-height: 46px;
            border: rgb(224, 224, 224) 1px solid;
            border-left: none;
        }

        .search .fa-search {
            margin-left: 6px;
        }

        .search-input .hold-list {
            border: rgb(224, 224, 224) 1px solid;
            border-top: none;
        }

        .hold-list .hold-item {

        }

        .banner-wrapper {
            position: relative;
        }

        .banner {
            height: 460px;
        }

        .banner .img-list li {
            position: absolute;
        }

        .banner img {
            width: 100%;
        }

        .pointer {
            position: absolute;
            bottom: 22px;
            right: 35px;
        }

        .banner .pointer a {
            display: block;
            float: left;
            width: 6px;
            height: 6px;
            background-color: rgba(1, 1, 1, .5);
            border: rgba(255, 255, 255, .4) solid 2px;
            border-radius: 50%;
            margin: 0 6px;
        }

        .banner .pointer a:hover,
        .banner .pointer .active {
            border-color: rgba(1, 1, 1, .5);
            background-color: rgba(255, 255, 255, .4);
        }

        .banner .prev-next a {
            width: 41px;
            height: 69px;
            top: 0;
            bottom: 0;
            margin: auto 0 ;
            position: absolute;
            background-image: url(./img/xiaomi/icon-slides.png);
        }

        .prev-next .prev {
            left: 234px;
            background-position: 83px 0;
        }

        .prev-next .prev:hover {
            left: 234px;
            background-position: 0 0;
        }


        .prev-next .next {
            right: 0;
            background-position: 41px 0;
        }

        .prev-next .next:hover {
            right: 0;
            background-position: -41px 0;
        }

        .back-top{
            position: fixed;
            width: 26px;
            height: 206px;
            background-color: #bfa;
            bottom: 100px;
            right: 50%;
            margin-right: -639px;
        }
    </style>
</head>
<body>
<div class="top-bar-wrapper">
    <div class="top-bar">
        <!--左侧导航-->
        <ul class="service">
            <li>
                <a href="javascript:;">小米商城</a>
                <span class="line">|</span>
            </li>
            <li>
                <a href="javascript:;">MIUI</a>
                <span class="line">|</span>
            </li>
            <li>
                <a href="javascript:;">LOT</a>
                <span class="line">|</span>
            </li>
            <li>
                <a href="javascript:;">云服务</a>
                <span class="line">|</span>
            </li>
            <li>
                <a href="javascript:;">金融</a>
                <span class="line">|</span>
            </li>
            <li>
                <a href="javascript:;">有品</a>
                <span class="line">|</span>
            </li>
            <li>
                <a href="javascript:;">小爱开放平台</a>
                <span class="line">|</span>
            </li>
            <li>
                <a href="javascript:;">企业团购</a>
                <span class="line">|</span>
            </li>
            <li>
                <a href="javascript:;">资质证照</a>
                <span class="line">|</span>
            </li>
            <li>
                <a href="javascript:;">协议规则</a>
                <span class="line">|</span>
            </li>
            <li>
                <a class="app" href="javascript:;">
                    下载app
                    <!--弹出层-->
                    <div class="qr-code">
                        <img src="img/download.png" alt="">
                        <span>小米商城app</span>
                    </div>
                </a>
                <span class="line">|</span>
            </li>
            <li>
                <a href="javascript:;">Select location</a>
            </li>
        </ul>
        <!--购物车-->
        <ul class="shop-cart">
            <li>
                <a href="javascript:;"><i class="fas fa-shopping-cart"></i> 购物车（0）</a>
            </li>
            <li class="shop-cart-info">
                购物车中还没有商品，赶紧选购吧！
            </li>
        </ul>
        <!--用户信息-->
        <ul class="user-info">
            <li>
                <a href="javascript:;">登录</a>
                <span class="line">|</span>
            </li>
            <li>
                <a href="javascript:;">注册</a>
            </li>

            <li>
                <a href="javascript:;">消息通知</a>
            </li>

        </ul>
    </div>
</div>
<div class="header-wrapper">
    <div class="header w">
        <h1 class="logo">
            <a href="javascript:;"><img src="./img/logo-mi2.png" alt=""></a>
        </h1>
        <!--中间导航条容器-->
        <div class="nav-wrapper">
            <ul class="nav">
                <li class="all-goods-wrapper">
                    <a class="all-goods" href="javascript:;">
                        全部商品分类
                    </a>
                    <ul class="left-menu">
                        <li>
                            <a href="javascript:;">
                                手机 电话卡
                                <i class="fa fa-angle-right"></i>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                电视 盒子
                                <i class="fa fa-angle-right"></i>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                笔记本 平板
                                <i class="fa fa-angle-right"></i>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                家电 插线板
                                <i class="fa fa-angle-right"></i>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                出行 穿戴
                                <i class="fa fa-angle-right"></i>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                智能 路由器
                                <i class="fa fa-angle-right"></i>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                电源 配件
                                <i class="fa fa-angle-right"></i>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                健康 儿童
                                <i class="fa fa-angle-right"></i>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                耳机 音响
                                <i class="fa fa-angle-right"></i>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                生活 箱包
                                <i class="fa fa-angle-right"></i>
                            </a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:;">小米手机</a>
                </li>
                <li>
                    <a href="javascript:;">RedMi</a>
                </li>
                <li>
                    <a href="javascript:;">电视</a>
                </li>
                <li>
                    <a href="javascript:;">笔记本</a>
                </li>
                <li>
                    <a href="javascript:;">家电</a>
                </li>
                <li>
                    <a href="javascript:;">路由器</a>
                </li>
                <li>
                    <a href="javascript:;">智能硬件</a>
                </li>
                <li>
                    <a href="javascript:;">服务</a>
                </li>
                <li>
                    <a href="javascript:;">社区</a>
                </li>
            </ul>
            <ul class="search">
                <li class="search-input">
                    <input type="text" value="小米11">
                    <div class="hold-list">
                        <div class="hold-item">
                            小米10
                        </div>
                        <div class="hold-item">
                            黑鲨手机
                        </div>
                        <div class="hold-item">
                            小米Mix
                        </div>
                    </div>
                </li>
                <li class="search-fa">
                    <i class="fas fa-search"></i>
                </li>
            </ul>
        </div>
        <div class="banner-wrapper">
            <div class="banner">
                <ul class="img-list">
                    <li>
                        <a href="javascript:;">
                            <img src="./img/xiaomi/banner1.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="./img/xiaomi/banner2.webp" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="./img/xiaomi/banner3.webp" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="./img/xiaomi/banner4.webp" alt="">
                        </a>
                    </li>
                </ul>
                <div class="pointer">
                    <a class="active" href="javascript:;"></a>
                    <a href="javascript:;"></a>
                    <a href="javascript:;"></a>
                    <a href="javascript:;"></a>
                    <a href="javascript:;"></a>
                </div>
                <div class="prev-next">
                    <a class="prev" href="javascript:;"></a>
                    <a class="next" href="javascript:;"></a>
                </div>
            </div>
        </div>
        <div class="back-top">

        </div>
    </div>
</div>
</body>
</html>